body {
margin: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
label {
width: 500px;
height: 200px;
position: relative;
display: block;
background: #ebebeb;
border-radius: 200px;
box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4),
inset 0px -5px 15px rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: 0.3s;
}
label::after {
content: "";
width: 180px;
height: 180px;
position: absolute;
top: 10px;
left: 10px;
background: linear-gradient(180deg, #ffcc89, #d8860b);
border-radius: 180px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
label svg {
position: absolute;
width: 120px;
top: 40px;
z-index: 100;
}
label svg.sun {
left: 40px;
fill: #fff;
transition: 0.3s;
}
label svg.moon {
left: 340px;
fill: #7e7e7e;
transition: 0.3s;
}
input {
width: 0;
height: 0;
visibility: hidden;
}
input:checked+label {
background: #242424;
}
input:checked+label::after {
left: 490px;
transform: translateX(-100%);
background: linear-gradient(180deg, #777, #3a3a3a);
}
input:checked+label svg.sun {
fill: #7e7e7e;
}
input:checked+label svg.moon {
fill: #fff;
}
input:checked+label+.background {
background: #242424;
}
input:active::after {
width: 260px;
}
.background {
width: 100vw;
height: 100vh;
background: #fff;
z-index: -1;
position: absolute;
transition: 0.3s;
}